import React from'react';
import './index.css';
import {Button,Avatar,Dropdown} from 'antd';
import {Layout} from 'antd';
import {MenuFoldOutlined} from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import {collapseMenu} from '../../store/reducers/tab'
const { Header } = Layout;
const CommonHeader = ({collapsed}) => {
  const logout =() => {
    // 退出登录
    console.log('logout');
  }
  const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" >
      个人中心
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a onClick={()=>logout} target="_blank" rel="noopener noreferrer" >
      退出
      </a>
    ),

  },

];
// 创建dispatch
const dispatch = useDispatch();
// 点击展开收起按钮
const setCollapsed = () => {
  console.log(collapsed);
  dispatch(collapseMenu())  // 调用dispatch,dispatch会触发reducer,reducer会修改state,state会触发组件的重新渲染
}
  return (
    <Header className="header-container">
     <Button
     icon={<MenuFoldOutlined />}
     type="text"
    style={{
         fontSize: '16px',
         width: 64,
        height: 32,
        backgroundColor: '#fff',
         }}
         onClick={() => {setCollapsed()}}
       />
   
       <Dropdown  menu={{items}}>
       
        <Avatar size={36} src={<img src={require("../../assets/images/user.png")} />} />
       </Dropdown>
    </Header>
  )

}
export default CommonHeader;